function graphTrace(options) {

    var _defaults = {
        srcEle: this,
        pid: $(this).attr('pid'),
	    pdid: $(this).attr('pdid')
    };
    var opts = $.extend(true, _defaults, options);

    // 处理使用js跟踪当前节点坐标错乱问题
    $('#changeImg').on('click', function() {
        $('#workflowTraceDialog').dialog('close');
        if ($('#imgDialog').length > 0) {
            $('#imgDialog').remove();
        }
        $('<div/>', {
            'id': 'imgDialog',
            title: '此对话框显示的图片是由引擎自动生成的，并用红色标记当前的节点<button id="diagram-viewer">Diagram-Viewer</button>',
            html: "<img src='" + webPath + '/workflow/process/trace/auto/' + opts.pid + "' />"
        }).appendTo('body').dialog({
            modal: true,
            resizable: false,
            dragable: false,
            width: document.documentElement.clientWidth * 0.95,
            height: document.documentElement.clientHeight * 0.95
        });
    });

	/*
	用官方开发的Diagram-Viewer跟踪
	 */
	$('#diagram-viewer').on('click', function() {
		$('#workflowTraceDialog').dialog('close');

		if ($('#imgDialog').length > 0) {
			$('#imgDialog').remove();
		}

		var url = webPath + '/diagram-viewer/index.html?processDefinitionId=' + opts.pdid + '&processInstanceId=' + opts.pid;
		$('<div/>', {
			'id': 'imgDialog',
			title: '此对话框显示的图片是由引擎自动生成的，并用红色标记当前的节点',
			html: '<iframe src="' + url + '" width="100%" height="' + document.documentElement.clientHeight * 0.90 + '" />'
		}).appendTo('body').dialog({
			modal: true,
			resizable: false,
			dragable: false,
			width: document.documentElement.clientWidth * 0.95,
			height: document.documentElement.clientHeight * 0.95
		});
	});

    // 获取图片资源
    var imageUrl = webPath + "/workflow/resource/process-instance?pid=" + opts.pid + "&type=image";
    $.getJSON(webPath + '/workflow/process/trace?pid=' + opts.pid, function(infos) {
        var positionHtml = "";
        // 生成图片
        var varsArray = new Array();
        $.each(infos, function(i, v) {
            var $positionDiv = $('<div/>', {
                'class': 'activity-attr'
            }).css({
                position: 'absolute',
                left: (v.x - 1),
                top: (v.y - 1),
                width: (v.width),
                height: (v.height),
                backgroundColor: 'black',
                opacity: 0,
                zIndex: 999
            });
            // 节点边框
            var $border = $('<div/>', {
                'class': 'activity-attr-border'
            }).css({
                position: 'absolute',
                left: (v.x - 1),
                top: (v.y - 1),
                width: (v.width),
                height: (v.height)
            });

            if (v.currentActiviti) {
                $border.addClass('ui-corner-all-12').css({
                    border: '3px solid red'
                });
            }
            positionHtml += $positionDiv[0].outerHTML+ $border[0].outerHTML;

            varsArray[varsArray.length] = v.vars;
        });
        var dialogHtml =　"<div><img src='" + imageUrl + "' style='position:absolute; left:0px; top:0px;' />" +
            "<div id='processImageBorder'>" +
            positionHtml +
            "</div>" +
            "</div>";
        dialog({
            fixed: true,
            quickClose: true,
            title: '流程图查看',
            content: dialogHtml,
            width: 750,
            height:550
        }).show();

        $('.activity-attr').popover({
            html:function() {
                var vars = $(this).data('vars');
                var tipContent = "<table class='need-border'>";
                $.each(vars, function(varKey, varValue) {
                    if (varValue) {
                        tipContent += "<tr><td class='label'>" + varKey + "</td><td>" + varValue + "<td/></tr>";
                    }
                });
                tipContent += "</table>";
                return tipContent;
            }
        });
        // // 设置每个节点的data
        // $('#workflowTraceDialog .activity-attr').each(function(i, v) {
        //     $(this).data('vars', varsArray[i]);
        // });
        // var vars = $(this).data('vars');
        // var tipContent = "<table class='need-border'>";
        // $.each(vars, function(varKey, varValue) {
        //     if (varValue) {
        //         tipContent += "<tr><td class='label'>" + varKey + "</td><td>" + varValue + "<td/></tr>";
        //     }
        // });
        // tipContent += "</table>";
        // return tipContent;
        // // 打开对话框
        // $('#workflowTraceDialog').dialog({
        //     modal: true,
        //     resizable: false,
        //     dragable: false,
        //     open: function() {
        //         // 此处用于显示每个节点的信息，如果不需要可以删除
        //         $('.activity-attr').qtip({
        //             content: function() {
        //                 var vars = $(this).data('vars');
        //                 var tipContent = "<table class='need-border'>";
        //                 $.each(vars, function(varKey, varValue) {
        //                     if (varValue) {
        //                         tipContent += "<tr><td class='label'>" + varKey + "</td><td>" + varValue + "<td/></tr>";
        //                     }
        //                 });
        //                 tipContent += "</table>";
        //                 return tipContent;
        //             },
        //             position: {
        //                 at: 'bottom left',
        //                 adjust: {
        //                     x: 3
        //                 }
        //             }
        //         });
        //         // end qtip
        //     },
        //     close: function() {
        //         $('#workflowTraceDialog').remove();
        //     },
        //     width: document.documentElement.clientWidth * 0.95,
        //     height: document.documentElement.clientHeight * 0.95
        // });

    });
}
